<template>
  <div v-show="isShow" class="image-preview" @click.self="closePreview">
    <!-- 图片容器：支持左右滑动 -->
    <div class="preview-wrapper" @touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd">
      <img v-for="(img, idx) in images" :key="idx" :src="img" class="preview-image" :style="{
        transform: `translateX(${-(currentIndex * 100)}%)`,
        transition: isTransition ? 'transform 0.3s ease' : 'none'
      }" />
    </div>

    <!-- 页码指示器 -->
    <div class="page-indicator">
      {{ currentIndex + 1 }} / {{ images.length }}
    </div>

    <!-- 关闭按钮（可选） -->
    <button class="close-btn" @click="closePreview">×</button>
  </div>
</template>